<template>
	<view>
		<view class="" style="width: 100%;height: 200rpx;padding: 0 0rpx;position: sticky;top: 0rpx;">
			<view class="topbox" style="width: 100%;height: 100%;display: flex;flex-direction: row;align-items: center;justify-content: space-around;padding: 0 10rpx;border-bottom: 1px solid #cfcfcf;border-bottom-left-radius: 60rpx;border-bottom-right-radius: 50rpx;color: #ffffff;">
				<view class="" style="width: 23%;height: 80%;display: flex;flex-direction: column;align-items: center;justify-content: center;">
					<view class="" style="font-size: 35rpx;padding-bottom: 10rpx;font-weight: bold;">{{allOrder}}单</view>
					<view class="">全部</view>
				</view>
				<view class="" style="width: 23%;height: 80%;display: flex;flex-direction: column;align-items: center;justify-content: center;">
					<view class="" style="font-size: 35rpx;padding-bottom: 10rpx;font-weight: bold;">{{daichuli}}单</view>
					<view class="">待处理</view>
				</view>
				<view class="" style="width: 23%;height: 80%;display: flex;flex-direction: column;align-items: center;justify-content: center;">
					<view class="" style="font-size: 35rpx;padding-bottom: 10rpx;font-weight: bold;">{{fuwuzhong}}单</view>
					<view class="">服务中</view>
				</view>
				<view class="" style="width: 23%;height: 80%;display: flex;flex-direction: column;align-items: center;justify-content: center;">
					<view class="" style="font-size: 35rpx;padding-bottom: 10rpx;font-weight: bold;">{{wancheng}}单</view>
					<view class="">已完成</view>
				</view>
			</view> 
		</view>
		<swiper class="swiper-box" style="height: 80vh;">
			<swiper-item class="swiper-item" style="height: 100%;">
				
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom"  refresher-enabled="true"  :refresher-triggered="trigger" @refresherrefresh="refresherrefresh">
					
					<view class="page-box" @click="intoOrderDetail(itemOrder)" v-for="itemOrder in buillList " :key="itemOrder.id" style="padding:0 20rpx;margin-top: 20rpx;">
						<view class="" style="width: 100%;background-color: #ffffff;border-radius: 20rpx;padding:20rpx;">
							<view class="" style="width: 100%;height: 20%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
								<view class="" style="display: flex;flex-direction: row;align-items: center;width: 80%;">
									<view class="" style="width: 2%;height: 40rpx;background-color: #2979FF;"></view>
									<view class="" style="margin-left: 2%;">订单编号：{{itemOrder.orderCode}}</view>
								</view>
								<view class="" :style="{color:itemOrder.orderProcessStatus==1 ? 'red' : (itemOrder.orderProcessStatus==4 ? '#FF9900' : (itemOrder.orderProcessStatus==5 ? '#2979FF' : ''))}">
									{{itemOrder.orderProcessStatus==1 ? '待处理' : (itemOrder.orderProcessStatus==4 ? '待完成' : (itemOrder.orderProcessStatus==5 ? '已完成' : '')) }}
								</view>
							</view>
							<view class="" style="width: 100%;display: flex;flex-direction: column;justify-content: center;">
								<view class="" style="margin-top: 10rpx;">支付时间：{{itemOrder.payTime}}</view>
								<view class="" style="margin-top: 10rpx;">上门时间：{{itemOrder.demandTime}}</view>
								<view class="" style="margin-top: 10rpx;">订单金额：<text style="color: red;font-size: 35rpx;">￥{{itemOrder.totalMoney}}</text></view>
								<view class="" v-if="itemOrder.orderNote" style="margin-top: 10rpx;">备注：{{itemOrder.orderNote}}</view>
							</view>
							<view class="" style="width: 100%;display: flex;flex-direction: row-reverse;margin-top: 20rpx;">
								<view class=""><u-button type="primary" @click="intoOrderDetail(itemOrder)" size="mini">查看详情</u-button></view>
								<view class="" style="margin-right: 20rpx;" v-if="itemOrder.orderProcessStatus==1">
									<u-button type="warning" @click="intoWaiter(itemOrder)" size="mini">派单</u-button>
								</view>
							</view>
						</view>
					</view>
					<view class="" style="height: 200rpx;width: 100%;display: flex;flex-direction: column;align-items: center;color:#2979FF ;line-height: 200rpx;" v-if="listState">-----我也是有底线的-----</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {	
		data() {
			return {
				current:0,
				swiperCurrent:0,
				buillList:[],
				dataForm:{
					orderProcessStatus:'1',
					pageNumber:1,
					pageSize:20,
				},
				total:'',
				listState:false,
				trigger:false,
				daichuli:'',
				allOrder:'',
				fuwuzhong:'',
				wancheng:'',
				
			};
		},
		onLoad() {
			this.getBillList()
		},
		onShow() {
			this.getBillList()
		},
		methods: {
			getBillList() {
				this.dataForm.pageNumber = 1
				this.$u.get('life/order/shop/page', this.dataForm).then(res => {
					console.log("我是订单列表");
					console.log(res)
					this.buillList = []
					this.buillList = res.list
					this.total = res.total
					this.daichuli = res.total
					if(this.trigger){
						this.$refs.uToast.show({
							title: "刷新成功！",
							type: 'success',
						})
					}
					this.trigger = false
				}).catch(() => {
					console.log("走catch了");
					this.$refs.uToast.show({
						title: "请求失败",
						type: 'error',
					})
				})
				this.$u.get('life/order/shop/page', { pageNumber:1,pageSize:20 }).then(res => {
					console.log("我是全部订单列表");
					console.log(res)
					this.allOrder = res.total
				}).catch(() => {
				})
				this.$u.get('life/order/shop/page', { orderProcessStatus:'3', pageNumber:1,pageSize:20 }).then(res => {
					console.log("我是全部订单列表");
					console.log(res)
					this.fuwuzhong = res.total
				}).catch(() => {
				})
				this.$u.get('life/order/shop/page', { orderProcessStatus:'5', pageNumber:1,pageSize:20 }).then(res => {
					console.log("我是全部订单列表");
					console.log(res)
					this.wancheng = res.total
				}).catch(() => {
				})
			},
			//查看订单详情
			intoOrderDetail(e){
				let orderInfo = JSON.stringify(e)
				uni.setStorageSync('orderInfo',orderInfo)
				uni.navigateTo({
					url:'/pages/orderSonPage/orderDetail/orderDetail'
				})
			},
			//派单
			intoWaiter(e){
				uni.navigateTo({
					url:'/pages/orderSonPage/allocationOrder/allocationOrder?orderCode=' + e.orderCode + `&id=` + e.id
				})
			},
			//上拉加载
			reachBottom(){
				console.log("触发了reachBottom");
				console.log(this.buillList);
				console.log(this.buillList.length);
				console.log(this.total);
				if(this.buillList.length == this.total  ){
					console.log("我已经是全部数据了");
					this.listState = true
				}else{
					this.dataForm.pageNumber = this.dataForm.pageNumber + 1
					this.$u.get('life/order/shop/page', this.dataForm).then(res => {
						console.log("我是订单列表");
						console.log(res)
						for(let i = 0;i<res.list.length;i++){
							this.buillList.push(res.list[i]) 
						}
						
					}).catch(() => {
						this.$refs.uToast.show({
							title: "请求失败",
							type: 'error',
						})
					})
					
				}
				console.log(this.buillList);
			},
			//下拉刷新了
			refresherrefresh(){
				this.trigger = true
				console.log("你刷新了");
				this.getBillList()
			}
		},
	}
</script>

<style lang="less">
	page{
		background-color: #F6F6F6;
	}
	::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}
	.topbox{
		background-image: -moz-linear-gradient(45deg, rgb(153, 133, 255), rgb(29, 218, 255));
		
		background-image: -webkit-linear-gradient(45deg,rgb(153, 133, 255), rgb(29, 218, 255));
		
		background-image: linear-gradient(45deg,rgb(153, 133, 255),rgb(29, 218, 255));
	}
</style>